<template>
    <el-form ref="ruleFormRef" :inline="true" style="max-width: 800px" :model="ruleForm" :rules="rules"
        label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
        <span class="span-Size">基本信息</span><br />
        <el-form-item label="姓名" prop="firstName">
            <el-input v-model="ruleForm.firstName" placeholder="请输入羊场全程" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="ruleForm.gender" style="width: 200px;">
                <el-radio :value="true">男</el-radio>
                <el-radio :value="false">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="证件类型" prop="idType">
            <el-select v-model="ruleForm.idType" placeholder="请选择证件类型">
                <el-option label="身份证" :value="1" />
                <el-option label="护照" :value="2" />
                <el-option label="军官证" :value="3" />
                <el-option label="士兵证" :value="4" />
                <el-option label="港澳来往通行证" :value="5" />
                <el-option label="警官证" :value="6" />
                <el-option label="外国人永久居留证" :value="7" />
                <el-option label="边民出入同行证" :value="8" />
                <el-option label="其他" :value="9" />
            </el-select>
        </el-form-item>
        <el-form-item prop="idNumber">
            <el-input v-model="ruleForm.idNumber" placeholder="（必填）" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNumber">
            <el-input v-model="ruleForm.phoneNumber" placeholder="（必填）" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="毕业院校" prop="university">
            <el-input v-model="ruleForm.university" />
        </el-form-item>
        <el-form-item label="学历" prop="educationLevel">
            <el-select v-model="ruleForm.educationLevel" style="width: 100px">
                <el-option label="博士" value="博士" />
                <el-option label="硕士" value="硕士" />
                <el-option label="本科" value="本科" />
                <el-option label="大专" value="大专" />
                <el-option label="中考" value="中考" />
                <el-option label="高中" value="高中" />
                <el-option label="初中" value="初中" />
                <el-option label="小学" value="小学" />
                <el-option label="其他" value="其他" />
            </el-select>
        </el-form-item>
        <br /><span class="span-Size">入职信息</span><br />
        <el-form-item label="单位" prop="company">
            <el-select v-model="ruleForm.company" placeholder="请输入详细地址">
                <el-option label="龚光养羊" :value="1" />
                <el-option label="大力养羊" :value="2" />
                <el-option label="亲亲养羊" :value="3" />
                <el-option label="草原养羊" :value="4" />
            </el-select>
        </el-form-item>
        <el-form-item label="员工状态" prop="employmentStatus" placeholder="--请选择--">
            <el-select v-model="ruleForm.employmentStatus">
                <el-option label="适用员工" :value="1" />
                <el-option label="在职员工" :value="2" />
                <el-option label="实习员工" :value="3" />
                <el-option label="临时工人" :value="4" />
                <el-option label="调至员工" :value="5" />
                <el-option label="专家顾问" :value="6" />
                <el-option label="返聘人员" :value="7" />
            </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="department">
            <el-cascader v-model="value" :props="props" :options="options2" @change="handleChange2" />
        </el-form-item>
        <el-form-item label="入职时间" prop="entryDate">
            <el-date-picker v-model="ruleForm.entryDate" type="date" placeholder="入职日期" />
        </el-form-item>
        <el-form-item label="转正时间" prop="probationDate">
            <el-date-picker v-model="ruleForm.probationDate" type="date" placeholder="转正日期" />
        </el-form-item>
        <el-form-item label="职务" prop="jobTitle">
            <el-select v-model="ruleForm.jobTitle" multiple placeholder="亲选择" style="width: 240px">
                <el-option label="总经理" :value="1" />
                <el-option label="人力经理" :value="2" />
                <el-option label="采购经理" :value="3" />
                <el-option label="生产经理" :value="4" />
                <el-option label="销售经理" :value="5" />
                <el-option label="财务经理" :value="6" />
            </el-select>
        </el-form-item>
        <el-form-item label="岗位" prop="position">
            <el-select v-model="ruleForm.position" multiple placeholder="亲选择" style="width: 240px">
                <el-option label="事业部总经理" :value="1" />
                <el-option label="单位人力经理" :value="2" />
                <el-option label="单位采购经理" :value="3" />
                <el-option label="单位生产经理" :value="4" />
                <el-option label="单位销售经理" :value="5" />
                <el-option label="单位财务经理" :value="6" />
            </el-select>
        </el-form-item>
        <el-form-item label="人事级别" prop="hrLevel">
            <el-select v-model="ruleForm.hrLevel" multiple placeholder="亲选择" style="width: 240px">
                <el-option label="A1" :value="1" />
                <el-option label="A2" :value="2" />
                <el-option label="A3" :value="3" />
                <el-option label="B1" :value="4" />
                <el-option label="B2" :value="5" />
                <el-option label="B3" :value="6" />
                <el-option label="C1" :value="7" />
                <el-option label="C2" :value="8" />
                <el-option label="C3" :value="9" />
                <el-option label="D1" :value="10" />
                <el-option label="D2" :value="11" />
                <el-option label="D3" :value="12" />
            </el-select>
        </el-form-item>
        <br /> <span class="span-Size">账号信息</span><br />
        <el-form-item label="账号" prop="account">
            <el-input v-model="ruleForm.account" placeholder="（必填）" />
        </el-form-item>
        <el-form-item label="密码" prop="password" placeholder="（必填）">
            <el-input v-model="ruleForm.password" show-password placeholder="（必填）" />
        </el-form-item>
        <el-form-item label="角色" prop="region">
            <el-select v-model="ruleForm.rolesIds" multiple placeholder="亲选择" style="width: 240px">
                <el-option v-for="item in roles" :key="item.rolesId" :label="item.roleName" :value="item.rolesId" />
            </el-select>
        </el-form-item>
        <br />
        <el-form-item>
            <el-button :icon="SuccessFilled" type="primary" style="width: 240px;margin-left: 50%;"
                @click="submitForm(ruleFormRef)">
                提交
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import {
    SuccessFilled,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();
onMounted(() => {
    getRoles();
    getOptions2();
})
//角色取值
// const ceshi = () => {
//     console.log(JSON.parse(JSON.stringify(ruleForm.rolesIds)))
//     ruleForm.rolesIds = JSON.parse(JSON.stringify(ruleForm.rolesIds))
//     console.log(ruleForm.rolesIds)
// }

const dialogFormVisible = ref(false);
const ruleForm = reactive({
    "rolesIds": [],
    "firstName": "",
    "gender": true,
    "idType": '',
    "idNumber": "",
    "phoneNumber": "",
    "email": "",
    "university": "",
    "educationLevel": "",
    "company": '',
    "employmentStatus": '',
    "department": 0,
    "entryDate": "",
    "probationDate": "",
    "jobTitle": [],
    "position": [],
    "hrLevel": [],
    "account": "",
    "password": "",
    "createId": counterStore.employeeId,
    "createTime": new Date(),
    "updateId": 0,
    "updateTime": "2000-01-01",
    "deleteId": 0,
    "deletes": true,
    "deleteTime": "2000-01-01"
});

//部门级联

const value = ref([])
const props = {
    expandTrigger: 'hover' as const,
}

const handleChange2 = (value: any) => {
    ruleForm.department = value[value.length - 1]
    console.log(ruleForm.department)

}
const options2 = ref([])
const getOptions2 = () => {
    axios.get("http://localhost:5039/api/Depart/SearchDepartmentTree").then((res) => {
        console.log(res.data.data)
        options2.value = res.data.data
    })
}
//校验相关
const formSize = ref<ComponentSize>('default');
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
    firstName: [{ required: true, message: '必填', trigger: 'blur' }],

});

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm.hrLevel[0])
            ruleForm.hrLevel = ruleForm.hrLevel[0]
            ruleForm.jobTitle = ruleForm.jobTitle[0]
            ruleForm.position = ruleForm.position[0]
            axios.post("http://localhost:5008/api/RBACs/EmployeeRouterAdd", ruleForm).then(res => {
                if (res.data.code == 0) {
                    ElMessage({
                        message: '添加成功',
                        type: 'success',
                    });
                }
            })
        } else {
            console.log('error submit!', fields);
        }
    });
};

//#region 获取角色下拉框数据
const roles = ref<any>([]);
const getRoles = async () => {
    axios.get("http://localhost:5008/api/RBACs/RolesList", {
        params: {
            RoleName: "",
            pageIndex: 1,
            pageSize: 1000
        }
    }).then(res => {
        roles.value = res.data.data;
    })
}

//# endregion




</script>

<style scoped>
.span-Size {
    font-size: 20px;
    /* 设置字体大小 */
    font-weight: bold;
    /* 设置字体加粗 */
    margin-right: 10px;
    /* 设置右边距 */
}

.el-input {
    width: 200px;

}

.el-select {
    width: 200px;

}
</style>
